<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">支付列表</span></strong>
            </div>
            <div class="body-content">
                <el-form :inline="true" size='small'>
                    <el-form-item label="手机号:">
                        <el-input v-model.trim="searchObj.mobile" clearable placeholder="" size='small'/>
                    </el-form-item>
                    <!-- <el-form-item label="姓名:">
                        <el-input v-model.trim="searchObj.name" clearable placeholder="" size='small'/>
                    </el-form-item> -->
                    <el-form-item label="用户ID:">
                        <el-input v-model.trim="searchObj.userId" clearable placeholder="" size='small'/>
                    </el-form-item>
                    <el-form-item label="身份证号:">
                        <el-input v-model.trim="searchObj.idCard" clearable placeholder="" size='small' style="width: 200px"/>
                    </el-form-item>
                    <el-form-item label="打款状态:">
                        <el-select v-model="searchObj.status" size='small' clearable placeholder="" style="width: 130px">
                            <el-option label="全部" value=""/>
                            <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="打款月份:">
                        <el-date-picker
                            v-model="searchObj.repaymentTime"
                            type="month"
                            placeholder="结算月份"
                            size="small"
                            value-format = 'yyyy-MM'
                            style="width:150px;"/>
                            <!-- <el-input v-model.trim="searchObj.idCard" clearable placeholder="" size='small'/> -->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size='small' icon="el-icon-search">查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="font-16 m-10"><span>总打款金额:{{totalRepayMoney}}元</span> <span v-show="searchObj.repaymentTime" class="m-l-30">该月份总打款金额:{{currTotalMoney}}元</span></div>
                <!--表格数据-->
                <el-table :data="tableData" v-loading="listLoading" border>
                    <el-table-column type='index' width='70' label="序号"/>
                    <el-table-column prop="mobile" label="手机号" width="120"/>
                    <el-table-column prop="trueName" width='100' label="姓名"/>
                    <el-table-column prop="idCard" label="身份证号"/>
                    <el-table-column prop="zhifubaoCard" label="支付宝账号"/>
                    <el-table-column prop="userId" label="用户ID"/>
                    <el-table-column prop="amount" label="金额"/>
                    <!-- <el-table-column prop="lastModifyTime" label="审核时间" width="100" /> -->
                    <el-table-column label="审核时间" width="100">
                        <template slot-scope="scope">
                            {{scope.row.status == 1 ? "" : scope.row.lastModifyTime}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="statusInfo" label="打款状态" width="100"/>
                    <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="updateStatus(scope.row)" size='small'>编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>
                <el-dialog title="修改状态" :visible.sync="dialogVisible" width="30%" :close-on-click-modal='false' @close="dialogClose">
                    <el-form label-width="100px">
                        <el-form-item label="订单状态">
                            <el-select v-model="dialogObj.status" size='small' placeholder="全部" style="width: 130px">
                                <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="Number(key)" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="updateConfirm" size='small'>修改</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </div>
        </div>
    </section>
</template>
<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            listLoading: false, //加载中
            searchObj: {
                status: "" //状态
            }, //查询参数

            // 打款状态
            statusMap: {
                1: "处理中",
                2: "处理成功",
                3: "处理失败",
                4: "取消"
            }, // 状态map
            tableData: [], //查询列表
            currentPage: 1, // 当前页数
            pageCount: 1, // 总页数

            amount: 0,
            monthAmount: 0,

            totalRepayMoney:0, // 总打款金额
            currTotalMoney:0, // 该月份总打款金额

            dialogObj:{
                autoId:'',
                status:'',
            },
            dialogVisible:false,
        };
    },
    methods: {
        // 点击查询
        onSubmit() {
            // 查询数据列表
            this.getDataList();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            // 查询数据列表
            this.getDataList();
        },
        // 查询数据列表
        getDataList() {
            this.listLoading = true;
            api.getBillsRecordDetail({
                ...this.searchObj,
                pageNum: this.currentPage
            })
                .then(res => {
                    this.listLoading = false;
                    this.totalRepayMoney = res.data.otherResult.totalRepayMoney || 0;
                    this.currTotalMoney = res.data.otherResult.currTotalMoney || 0;
                    this.tableData = res.data.pageInfo.list;
                    this.pageCount = res.data.pageInfo.pages;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 关闭弹窗
        dialogClose(){
            this.dialogObj={
                autoId:"",
                status:""
            }
        },
        // 更新打款状态
        updateStatus(row) {
            this.dialogObj.autoId = row.autoId;
            this.dialogObj.status = row.status;
            this.dialogVisible = true;
        },
        updateConfirm(){            
            api.updateBillsRecordStatus(this.dialogObj)
                .then(res => {
                    // 查询数据列表
                    this.getDataList();
                    this.dialogVisible = false;

                })
                .catch(() => {});
        },
    },
    mounted() {
        // 查询数据列表
        this.getDataList();
    }
};
</script>

<style>
</style>
